<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="../styles/global.css">
    <link rel="stylesheet" href="css/unis.css">
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div class="container-fluid" id="app">
    <div class="row bg-pearl-blue" style="padding-top: 15px;">
        <div class="col-8">
            <h2 class="primary">02. Colors & Shadows</h2>
            <p style="padding-left: 46px;"> The following CSS files need to be introduced.</p>
        </div>
        <div class="col-4" style="text-align: right; padding-top: 30px;">
            <a class="btn btn-primary" href="./css/typography.css" download="typography">download (typography.css)</a>
        </div>
    </div>
    <div class="d-flex align-items-stretch">

        <div class="col isolation">
            <div>
                <div v-for="(list,index) in unisColors" :id="'section'+index">
                    <div>
                        <h3 v-html="list.name"></h3>
                        <p>&nbsp;</p>
                    </div>
                    <div class="btn-code">
                        <div class="code-label blue">
                            <div class="unis-arrow left "></div>
                            <div class="unis-arrow right "></div>
                        </div>
                        <input type="checkbox" class="code-input ">
                        <div class="card">
                            <div class="card-header">Example</div>
                            <div class="card-body">
                                <div class="row " style="margin-bottom: 20px;">
                                    <div class="col " v-for="item in list.list"
                                         :style="{'height':item.height}">
                                        <div class="row">
                                            <h3  :class="'col-' + item.col" style="font-size: 18px; spacing: 0.4px " v-if="item.lable" v-html="item.lable"></h3>
                                            <div class="col-8" v-if="item.remark" v-html="item.remark"></div>
                                        </div>
                                        <div class="Shadows_box">
                                            <div class="colorShadows" v-html="item.html"
                                                 :style="{'height':item.height}"></div>
                                            <div class="colorsText" v-html="item.textHtml"></div>
                                        </div>
                                        <div class="Shadows_box" v-if="item.otheHtml" style="margin-left: 45px;">
                                            <div class="colorShadows" v-html="item.otheHtml"
                                                 :style="{'height':item.height}"></div>
                                            <div class="colorsText" v-html="item.othetextHtml"></div>
                                        </div>

                                    </div>
                                </div>
                                <div class="row xmp">
                                    <div class="col " v-for="item in list.list" style="background: #23241f;">
                                   <pre class="mxScroll">
                                    <code class="lang-javascript html code" v-html="item.html"></code>
                                    <code class="lang-javascript html code"v-if="item.otheHtml" v-html="item.otheHtml">
                                    </code>
                                   </pre>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div v-for="(list,index) in shadows" :id="'shadows'+index">
                    <div>
                        <h3 v-html="list.name"></h3>
                        <p>&nbsp;</p>
                    </div>
                    <div class="btn-code">
                        <div class="code-label blue">
                            <div class="unis-arrow left "></div>
                            <div class="unis-arrow right "></div>
                        </div>
                        <input type="checkbox" class="code-input ">
                        <div class="card">
                            <div class="card-header">Example</div>
                            <div class="card-body">
                                <div class="row " style="margin-bottom: 20px;">
                                    <div class="col " v-for="item in list.list"
                                         :style="{'height':item.height}">
                                        <div class="Shadows">
                                            <div v-html="item.html" :style="{'height':item.height}"></div>
                                        </div>

                                    </div>
                                </div>
                                <div class="row xmp">
                                    <div class="col " v-for="item in list.list">
                                    <pre class="mxScroll">
                                    <code class="lang-javascript html code" v-html="item.html">
                                    </code>
                                   </pre>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="height: 100px;" id="bottid"></div>
        </div>
    </div>
</div>
<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
    Vue.config.debug = true;
    app = new Vue({
        el: "#app",
        data: {
            unisColors: [
                {
                    name: 'Colors',
                    list: [
                        {
                            lable: 'Primary ',
                            remark: 'Main color and text ',
                            col:'3',
                            html: '<div class="primary-bg">2C3C59</div>' +
                            '<div class="primary-bg-70">677388</div>' +
                            '<div class="primary-bg-50">8E97A7</div>',
                            textHtml: '<div>100%</div>' +
                            '<div >70%</div>' +
                            '<div >50%</div>'

                        },
                        {
                            lable: 'Accent',
                            col:'3',
                            remark: 'Emphasize action and highlighted information',
                            html: '<div class="accents-bg"></div>',
                            textHtml:'<div>56A7FD</div>',
	                        otheHtml:'<div class="uisbut-bg-70"></div>',
                            othetextHtml:'<div>D5E9FA</div>'
                        },
                        {
                            lable: '&nbsp; ',
                            remark: '&nbsp; ',
                            otheHtml:'&nbsp; ',
                            html: '&nbsp; ',
                            textHtml:'&nbsp; ',
                            othetextHtml:'&nbsp; '

                        }]
                },
                {
                    name: ' ',
                    list: [{
                        lable: 'Semantic ',
                        remark: 'Indicate success',
                        col:'3',
                        html: '<div class="success-bg">3BCD99</div>' +
                        '<div class="success-bg-70">71D8B4</div>' +
                        '<div class="success-bg-50">94DEC6</div>',
                        textHtml: '<div >100%</div>' +
                        '<div >70%</div>' +
                        '<div >50%</div>'
                    }, {
                        lable: '&nbsp; ',
                        remark: 'Indicate error ',
                        col:'4',
                        html: '<div class="error-bg">ED5158</div>' +
                        '<div class="error-bg-70">EE8187</div>' +
                        '<div class="error-bg-50">EFA2A7</div>',
                        textHtml: '<div >100%</div>' +
                        '<div >70%</div>' +
                        '<div >50%</div>'
                    },
                        {
                            lable: '&nbsp; ',
                            remark: 'Indicate warning ',
                            col:'3',
                            html: '<div class="warning-bg">FFD36A</div>' +
                            '<div class="warning-bg-70">FADC93</div>' +
                            '<div class="warning-bg-50">F8E3B0</div>',
                            textHtml: '<div >100%</div>' +
                            '<div >70%</div>' +
                            '<div >50%</div>'
                        }
                    ]
                },
                {
                    name: ' ',
                    list: [
                        {
                            lable: 'Neutrals ',
                            remark: ' ',
                            col:'3',
                            html: '<div class="neutrals-bg">C8CDD5</div>' +
                            '<div class="neutrals-bg-70">D3D8DE</div>' +
                            '<div class="neutrals-bg-50">E9EBEF</div>',
                            textHtml: '<div >100%</div>' +
                            '<div >70%</div>' +
                            '<div >20%</div>'
                        },{


                            lable: 'Button Hover ',
                            remark: ' ',
                            col:'5',
                            html: '<div class="buthover-bg">3580FC</div>'  ,
                            textHtml: '<div >Primary</div>',
                            otheHtml:'<div class="buthover-bg-70">C4D8EA</div>',
                            othetextHtml:'<div>Secondary</div>'
                        }, {
                            lable: 'Background ',
                            remark: ' ',
                            col:'5',
                            html: '<div class="def-bg"></div>',
                            textHtml: '<div>FCFDFF</div>'
                        }

                    ]
                },
            ],
            shadows: [
                {
                    name: 'Shadows',
                    list: [
                        {
                            lable: 'Primary ',
                            remark: 'Main color and text ',
                            html: '<div class="shadows">1</div>',

                        },
                        {
                            lable: 'Accents ',
                            remark: 'Emphasize action ',
                            html: '<div class="shadows">2</div>',
                        },
                        {
                            lable: 'Accents ',
                            remark: ' highlighted information ',
                            html: '<div class="shadows">3</div>',
                        }]
                }
            ]

        },
    });
</script>
<script>
    $(document).ready(function () {
        var navHeight = $("#navHeight").offset().top;
        var navFix = $("#nav-wrap");
        $(window).scroll(function () {
            if ($(this).scrollTop() > navHeight) {
                navFix.addClass("navAside");
            }
            else {
                navFix.removeClass("navAside");
            }
        })
    });
    $('.nav-wrap').navScroll({
        mobileDropdown: false,
        mobileBreakpoint: 0,
        scrollSpy: true
    });
</script>

<script>
    var opts = {
        'indent_size': 4,
        'indent_char': ' ',
        'max_char': 300,
        'brace_style': 'expand',
    }
    var source = document.getElementsByClassName('code');
    for (var i = 0; i < source.length; i++) {
        source[i].innerHTML = style_html(source[i].innerHTML, opts).replace(/</g, "&lt;");
    }

</script>
<script>
    hljs.initHighlightingOnLoad();
</script>
</body>
</html>